<template>
  <div id="mainBox"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const props = defineProps({
  listData: {
    required: true,
    type: Array,
    default: [],
  },
});
const { listData } = toRefs(props);
onMounted(() => {
  watch(()=>props.listData,()=>{
  let myChart = echarts.init(document.getElementById("mainBox"));
  const xArr=listData.value.map((item=>item.province))
  const yArr=listData.value.map(item=>item.disasterValue)
  let option = {
    textStyle: {
      color: "#c0c3cd",
      fontSize: 14,
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {
          backgroundColor: "#031245",
        },
        restore: {},
      },
      iconStyle: {
        borderColor: "#c0c3cd",
      },
    },
    legend: {
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
      icon: "circle",
      left: "center",
      padding: 0,
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
        padding: [0, 0, 0, 0],
      },
    },
    color: [
      "#63caff",
      "#49beff",
      "#03387a",
      "#03387a",
      "#03387a",
      "#6c93ee",
      "#a9abff",
      "#f7a23f",
      "#27bae7",
      "#ff6d9d",
      "#cb79ff",
      "#f95b5a",
      "#ccaf27",
      "#38b99c",
      "#93d0ff",
      "#bd74e0",
      "#fd77da",
      "#dea700",
    ],
    grid: {
          left: "0%",
          right: "12%",
          bottom: "15%",
          containLabel: true,
    },
    xAxis: {
      name: "省",
      nameTextStyle:{
          color:'#fff'
      },
      axisLabel: {
        color: "#c0c3cd",
        fontSize: 14,
        interval: 0,
      },
      axisTick: {
        lineStyle: {
          color: "#384267",
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: true,
      },
      data: xArr,
      type: "category",
    },
    yAxis: {
      nameTextStyle: {
        color: "#c0c3cd",
        padding: [0, 0, 0, 0],
        fontSize: 14,
      },
      axisLabel: {
        color:'rgba(255,255,255,0.5)',
        // color: "#c0c3cd",
        fontSize: 14,
      },
      axisTick: {
        lineStyle: {
          color: "#384267",
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#384267",
          type: "dashed",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: false,
      },
      name: "灾损值（亿元）",
      nameTextStyle:{
          color:'#fff',
          padding:[0,0,10,20]
      },
      max:20000
    },
    series: [
      {
        data: yArr,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        barMaxWidth: "auto",
        barWidth: 30,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: "#0b9eff",
              },
              {
                offset: 1,
                color: "#63caff",
              },
            ],
          },
        },
        label: {
          show: true,
          position: "top",
          distance: 10,
          color: "#fff",
        },
      },
      {
        data: yArr,
        type: "pictorialBar",
        barMaxWidth: "20",
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: [0, "-50%"],
        symbolSize: [30, 12],
        zlevel: 2,
      },
    ],
    tooltip: {
      trigger: "axis",
      show: false,
    },
  };
  myChart.setOption(option);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
  }, { deep: true, immediate: true })
});
</script>

<style lang="scss" scoped>
#mainBox {
  width: 440px;
  height: 220px;
  margin: -10px 20px;
}
</style>
